<!DOCTYPE html>
<html>

<head>
    <title>表单</title>
    <meta name="keywords" content="表单">
    <meta name="description" content="表单">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../css/style.css">
    <!-- [if lt IE 9]>
            <script src="../../lib/html5shiv.js"></script>
            <script src="../../lib/respond.min.js"></script>
        <![endif]-->
    <script src="../../lib/jquery-1.8.0.min.js"></script>
    <script src="../../lib/flexible.js"></script>
    <script src="../../lib/layer/layer.js"></script>
    <script src="../../js/config.js"></script>
    <script src="../../js/utils.js"></script>
    <style>
        .form{
            max-width: 750px;
            width: 100%;
            margin: 20px auto;
        }
        .line{
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="container">
            <section class="form">
                <div class="form-item">
                    <div class="form-item__label">用户名</div>
                    <div class="form-item__content">
                        <div class="input">
                            <input type="text" class="input__inner">
                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__label">类型</div>
                    <div class="form-item__content">
                        <div class="input">
                            <select name="" id="" class="select__inner">
                                <option value="1">测试</option>
                                <option value="1">测试</option>
                                <option value="1">测试</option>
                                <option value="1">测试</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__label">时间</div>
                    <div class="form-item__content">
                        <div class="col-19">
                            <div class="input">
                                <input type="text" class="input__inner" id="test1">
                            </div>
                        </div>
                        <div class="col-2 line">-</div>
                        <div class="col-19">
                            <div class="input">
                                <input type="text" class="input__inner" id="test2">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__label">选择框</div>
                    <div class="form-item__content">
                        <div class="checkbox-group">
                            <label class="checkbox">
                                <input type="checkbox" name="type1" class="checkbox__inner">
                                <div class="text">选择一</div>
                            </label>
                            <label class="checkbox">
                                <input type="checkbox" name="type1" class="checkbox__inner">
                                <div class="text">选择二</div>
                            </label>
                            <label class="checkbox">
                                <input type="checkbox" name="type1" class="checkbox__inner">
                                <div class="text">选择三</div>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__label">单选框</div>
                    <div class="form-item__content">
                        <div class="radio-group">
                            <label class="radio">
                                <input type="radio" name="type2" class="radio__inner">
                                <div class="text">选择一</div>
                            </label>
                            <label class="radio">
                                <input type="radio" name="type2" class="radio__inner">
                                <div class="text">选择二</div>
                            </label>
                            <label class="radio">
                                <input type="radio" name="type2" class="radio__inner">
                                <div class="text">选择三</div>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__label">文本框</div>
                    <div class="form-item__content">
                        <div class="input">
                            <textarea name="" id="" class="textarea__inner"></textarea>
                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__content">
                        <a class="btn-primary pure">提交</a>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <script>
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#test1'
            })
            //执行一个laydate实例
            laydate.render({
                elem: '#test2'
            })
            //执行一个laydate实例
            laydate.render({
            elem: '#test3'
            })
            //执行一个laydate实例
            laydate.render({
            elem: '#test4'
            })
        })
    </script>
</body>

</html>